<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <!-- 引入Swiper -->
    <link rel="stylesheet" href="css/swiper.css" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css" type="text/css" />
    <link href="css/Pager.css" rel="stylesheet" type="text/css" />
    <title>Sina-Weibo-Snooping</title>
    <!--<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />-->
</head>
<body>
    <div id="popLayer" style="width: 100%;height: 100%;margin:0 auto;overflow: hidden;clear: both">
        <div class="col" style="width:200px;height: auto;margin: 5px;border: 1px solid #000000;float: left;">
            <div style="text-align: center">各月份美女颜值之星</div>

            <div style="text-align: center">No.1</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="f_swiper1">
                <div class="swiper-wrapper" id="f_swiper1_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev" style="color: #5e5e5e"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.2</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="f_swiper2">
                <div class="swiper-wrapper" id="f_swiper2_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.3</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="f_swiper3">
                <div class="swiper-wrapper" id="f_swiper3_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.4</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="f_swiper4">
                <div class="swiper-wrapper" id="f_swiper4_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.5</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="f_swiper5">
                <div class="swiper-wrapper" id="f_swiper5_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>


        </div>
        <div class="col" style="width:200px;height: auto;margin: 5px;border: 1px solid #000000;float: right;">
            <div style="text-align: center">各月份帅哥颜值之星</div>

            <div style="text-align: center">No.1</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="m_swiper1">
                <div class="swiper-wrapper" id="m_swiper1_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.2</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="m_swiper2">
                <div class="swiper-wrapper" id="m_swiper2_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.3</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="m_swiper3">
                <div class="swiper-wrapper" id="m_swiper3_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.4</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="m_swiper4">
                <div class="swiper-wrapper" id="m_swiper4_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <div style="text-align: center">No.5</div>
            <div class="swiper-container" style="width: 200px;height: 120px;" id="m_swiper5">
                <div class="swiper-wrapper" id="m_swiper5_wrapper">

                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination" style="text-align: right"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>
        </div>
        <div class="col" style="margin-left: 200px;margin-right: 200px;padding: 10px;">
            <h2 style="padding-bottom: 10px;font-weight: 900">条件检索用户轨迹：</h2>
            <div style="padding: 5px;font-weight: 600;font-size: large">颜值分数区间：
                <div class="btn-group" id="score" data-toggle="buttons">
                    <label  class="btn btn-info active">
                        <input  type="radio" name="score" value="value_90" checked="checked">[90,100]
                    </label>
                    <label  class="btn btn-info">
                        <input  type="radio" name="score" value="value_80">[80,90)
                    </label>
                    <label  class="btn btn-info">
                        <input  type="radio" name="score" value="value_70">[70,80)
                    </label>
                    <label  class="btn btn-info">
                        <input  type="radio" name="score" value="value_60">[60,70)
                    </label>
                    <label  class="btn btn-info">
                        <input  type="radio" name="score" value="value_50">[50,60)
                    </label>
                </div>
            </div><!-- /btn-group -->
            <div style="padding: 5px;font-size: large;font-weight: 600">性别：
                <div class="btn-group" id="gender" data-toggle="buttons">
                    <label  class="btn btn-info active">
                        <input  type="radio" name="gender" value="m" checked="checked">男
                    </label>
                    <label  class="btn btn-info">
                        <input  type="radio" name="gender" value="f">女
                    </label>
                </div>          化妆：
                <div class="btn-group" id="makeup_result" data-toggle="buttons">
                    <label  class="btn btn-info active">
                        <input  type="radio" name="makeup_result" value="Madeup" checked="checked">Yes
                    </label>
                    <label  class="btn btn-info">
                        <input  type="radio" name="makeup_result" value="Original">No
                    </label>
                </div>
            </div>
            <!--<div class="docs-methods" style="padding: 5px;">-->
                <!--<form class="form-inline">-->
                    <!--<div data-toggle="distpicker" id="distpicker" style="font-weight: 600;font-size: large">城市区间：-->
                        <!--<div class="form-group">-->
                            <!--<label class="sr-only" for="province">Province</label>-->
                            <!--<select class="form-control" id="province" data-province="上海市"></select>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label class="sr-only" for="city">City</label>-->
                            <!--<select class="form-control" id="city" data-city="上海市市辖区"></select>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label class="sr-only" for="district">District</label>-->
                            <!--<select class="form-control" id="district" data-district="黄浦区"></select>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<button class="btn btn-info" id="reset" type="button" style="font-size: medium" onclick="$('#distpicker').distpicker('reset')">重置</button>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</form>-->
            <!--</div>-->
            <div style="padding: 5px;font-weight: 600;font-size: large">选择检索区域：
                <!--<button id="circle">圆形区域检索</button>-->
                <button id="rectangle">矩形区域检索</button>
                <button id="finish">完成选择</button>
                <button id="close">取消选择</button>
            </div>
            <div class="form-inline" style="padding: 5px;height: 50px">
                <div class="form-group" style="float: left;margin-top: 2px">
                    <label class="control-label" style="font-size: large;font-weight: 600;">开始日期:</label>
                    <div class="input-group date form_date mr10">
                        <input class="form-control" type="text" value="" id="startDate">
                    </div>
                </div>
                <div class="form-group" style="float: left;margin-top: 2px">
                    <label class="control-label" style="font-size: large;font-weight: 600;">结束日期:</label>
                    <div class="input-group date form_date">
                        <input class="form-control" type="text" value="" id="endDate">
                    </div>
                </div>
                <button class="btn btn-primary" style="font-size: larger;font-weight: 600;margin-left: 20px" onclick="start_search()">开始检索</button>
            </div>
            <div style="width: 100%;">
                <div class="col" id="list_col" style="width: 25%;padding: 0;margin: 0;float: left;">
                    <div class="container" id="resultList" style="display:none;width: 100%;height: 430px;margin: 0;padding: 0">
                        <ul class="list-group" id="search_result" style="padding: 0;float: left;width: 100%;"></ul>
                    </div>
                    <div id="pager" style="height: 29px;align-content: center"></div>
                </div>
                <div class="col" id="map_col" style="width: 75%;padding: 0;margin: 0;float: right;">
                    <div class="map" style=" width:100%;height: 400px;padding: 0;float: left;" id="Map_result" tabindex="0"></div>
                </div>
            </div>
            <div id="popBox" style="background-color: #bce8f1;display: none;z-index: 11;width: 500px;height: 500px;position:fixed;top:0;right:0;left:0; bottom:0; margin:auto;">
                <div class="map" style=" width:100%;height: 100%;padding: 0;" id="Map_load" tabindex="0"></div>
            </div>
        </div>

    </div>
    <!-- JS依赖 -->
    <script type="text/javascript" src="js/swiper.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/distpicker.data.js"></script>
    <script type="text/javascript" src="js/distpicker.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.11&key=1854849ee9a0131347baa950c37a0c29"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript" src="js/track.js"></script>
    <script src="js/jquery.pager.js" type="text/javascript"></script>
</body>
</html>